index<template>
  <view class="listBox">
    <view class="list">
      <view class="leftBox">
        <text>动态点赞通知</text>
      </view>
      <view class="rightBox">
        <switch style="zoom: 0.8;" :checked="isMessage?true:false" @change="switchChange" />
      </view>
    </view>

    <view v-if="false" @tap="goToPage('')" class="list">
      <view class="leftBox">
        <text>关于柔宇社区</text>
      </view>
      <view class="rightBox">
        <image src="../static/sns/ic_arrow_smallgrey.png" />
      </view>
    </view>
	
	<view @tap="goToPage('https://www.royole.com/cn/privacy')" class="list">
	  <view class="leftBox">
	    <text>隐私政策</text>
	  </view>
	  <view class="rightBox">
	    <image src="../static/sns/ic_arrow_smallgrey.png" />
	  </view>
	</view>
	
	<view @tap="goToPage('https://www.royole.com/cn/agreement')" class="list">
	  <view class="leftBox">
	    <text>用户协议</text>
	  </view>
	  <view class="rightBox">
	    <image src="../static/sns/ic_arrow_smallgrey.png" />
	  </view>
	</view>
	
	
    <button v-if="true" @click="logout" class="logOut">退出登录</button>
  </view>
</template>

<script>
import { $storage } from "@/utils";
export default {
  data() {
    return {
      isMessage: false,
    };
  },
  async onLoad() {
    const user = $storage.get("user") || {};
    this.$u.api.getUser(user.id).then((res) => {
      this.isMessage = res.message_notice;
    });
  },
  created: function () {},
  methods: {
    logout() {
      $storage.clear();
      wx.reLaunch({
        url: "/pages/index",
      });
    },

    async switchChange(e) {
      console.log(e.detail.value);
      if (e.detail.value) {
        await this.$u.api.setUserMessage(1);
      } else {
        await this.$u.api.setUserMessage(0);
      }
      // const num = 0 as any
    },
    goToPage(url) {
		console.log(url)
      wx.navigateTo({
        url: '/pages/webview?url=' + encodeURI(url)
      });
    },
  },
};
</script>

<style lang="scss">
/*!
	 * Page: pages/setting/setting
	 * License: MIT
	 * Created: 2019-10-15 17:00
	 */
@import "../var.scss";

.list {
  & + & {
    border-top: 1rpx solid $border-color;
  }
}

.listBox {
  width: 100%;

  .list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 102rpx;
    font-weight: 700;

    .leftBox {
      display: flex;
      align-items: center;
      font-size: 30rpx;

      .iconBox {
        display: flex;
        align-items: center;
        width: 30rpx;
        height: 30rpx;
        margin-right: 30rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      // button {
      //   border: none;
      //   background-color: unset;
      //   font-size: 30rpx;
      //   text-align: left;
      //   background-color: yellow;
      // }
    }

    .rightBox {
      display: flex;
      align-items: center;
      color: #b3b3b3;
      font-weight: 500;
      font-size: 28rpx;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-left: 18rpx;
      }
    }
  }

  .logOut {
    background-color: red;
    color: #ffffff;
    width: 70%;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 44rpx;
    position: absolute;
    bottom: 100rpx;
    left: 15%;
    right: 15%;
  }

  padding: 30rpx;
  font-size: 30rpx;
  background-color: $bgcolor-light;
}
</style>
